<template>
  <div class="recommend">
    <!-- 轮播图和右侧广告 -->
    <swiper></swiper>
    <!-- 首页主要内容区域--分为两大块 -->
    <div class="main">
      <div class="main-wrap">
        <div class="main-left">
          <!-- 热门推荐组件 -->
          <hot-recommend></hot-recommend>
          <!-- 个性化推荐组件 -->
          <personal-recommend></personal-recommend>
          <!-- 新碟上架组件 -->
          <new-disc></new-disc>
          <!-- 榜单组件 -->
          <song-list></song-list>
        </div>
        <div class="main-right">
          <!-- 首页用户卡片 -->
          <user-card></user-card>
          <!-- 入驻歌手 -->
          <settled-singer></settled-singer>
          <!-- 热门主播 -->
          <hot-dj></hot-dj>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 左侧组件
// 轮播图组件和广告
import swiper from "@/components/find-music-components/recommend/swiper";
// 热门推荐
import hotRecommend from '@/components/find-music-components/recommend/hot-recommend'
// 个性化推荐
import personalRecommend from '@/components/find-music-components/recommend/personal-recommend'
// 新碟上架
import newDisc from '@/components/find-music-components/recommend/new-disc'
// 榜单
import songList from '@/components/find-music-components/recommend/song-list'

// 右侧组件
// 用户卡片
import userCard from '@/components/find-music-components/recommend/user-card'
// 入驻歌手
import settledSinger from '@/components/find-music-components/recommend/settled-singer'
// 热门主播
import hotDj from '@/components/find-music-components/recommend/hot-dj'
export default {
  name: "recommend",
  components: { swiper,hotRecommend,personalRecommend,newDisc,songList,userCard,settledSinger,hotDj },
};
</script>

<style scoped lang="scss">
.recommend{
  // 下方主体区域
  .main {
    width: 100%;
    background-color: #f5f5f5;
    .main-wrap {
      width: 982px;
      margin: 0 auto;
      display: flex;
      border: 1px solid #d3d3d3;
      border-bottom: none;
      .main-left {
        width: 729px;
        background-color: #fff;
        border-right: 1px solid #d3d3d3;
      }
      .main-right {
        width: 254px;
        background-color: #fff;
      }
    }
  }
}
  
</style>